<!DOCTYPE html>
<meta charset='utf-8'>
<style>
.container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
  height: 50px;
}
.rtl {
    direction: rtl;
}
.float {
  float: right;
  width: 100px;
  height: 50px;
}
span {
  display: inline-block;
}
</style>
<p>crbug.com/720377: The text below should have an ellipsis.</p>
<p>You should see something like 'This text sho...' below.</p>
<div class="container">
  <div class="float"></div>
  <span>This text should have an ellipsis.</span>
</div>
<p>You should see something like '...ave an ellipsis' below.</p>
<div class="container rtl">
  <span>This text should have an ellipsis.</span>
  <div class="float" style="float:left;"></div>
</div>
<p>You should see hebrew characters followed by an ellipsis.</p>
<div class="container">
  <div class="float"></div>
  <span>בגדהוזחטיכךל בגדהוזחטיכךל</span>
</div>
